<template>
  <div class="login-container">
    <div>
      <div class="sys-title">科抖罗盘</div>
      <el-form ref="loginForm" :model="loginForm" class="login-form" label-position="top" size="small">
        <el-form-item label="账号" prop="username" :rules="[{ required: true, trigger: 'blur', message: '请输入账号' }]">
          <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" />
        </el-form-item>
        <el-form-item label="密码" prop="password" :rules="[{ required: true, trigger: 'blur', message: '请输入密码' }]">
          <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="code" :rules="[{ required: true, trigger: 'blur', message: '请输入验证码' }]">
          <div style="display: flex; width: 100%">
            <el-input v-model="loginForm.code" tabindex="3" @keyup.enter.native="handleLogin" />
            <img style="flex-shrink: 0; cursor: pointer" src="https://t11.baidu.com/it/u=3210116116,2698637809&fm=58" height="32px" width="100px" @click="changeCodeImg()" />
          </div>
        </el-form-item> -->
        <div style="display: flex; justify-content: space-around; padding-top: 20px">
          <el-button :loading="loading" type="primary" style="width: 80%" @click.native.prevent="handleLogin">登录</el-button>
          <!-- <el-button :loading="loading" type="primary" style="width: 40%" @click="register">注册</el-button> -->
        </div>
      </el-form>
    </div>

    <registerForm ref="registerForm"></registerForm>
  </div>
</template>

<script>
import registerForm from './registerForm.vue';
import request from '@/utils/request';
export default {
  name: 'Login',
  components: {
    registerForm
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
        // code: '1'
      },
      loading: false,
      passwordType: 'password',
      codeImg: '',
      redirect: undefined
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/home' });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    }
    // changeCodeImg() {
    //   request({
    //     url: '/api/web/moralSystem/backScore',
    //     method: 'post',
    //     data: this.form
    //   })
    //     .then(res => {
    //       this.$message({
    //         message: '注册成功',
    //         type: 'success'
    //       });
    //       this.visible = false;
    //       this.registerLoading = false;
    //     })
    //     .catch(e => {
    //       this.registerLoading = false;
    //     });
    // },
    // register() {
    //   this.$refs.registerForm.initData();
    // }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .sys-title {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
  }
  .login-form {
    position: relative;
    width: 520px;
    padding: 30px;
    overflow: hidden;
    box-shadow: 0px 0px 5px 1px #ccc;
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 0px;
      font-size: 16px;
      cursor: pointer;
      user-select: none;
    }
  }
}
</style>
